import React, {Component} from 'react';
import PubSub from 'pubsub-js'
import './index.css'



class List extends Component {
    pubSubToken = ''
    state = {
        userList: [],
        isFirst: true,
        isLoading: false,
        err: ''
    }

    componentDidMount() {
        this.pubSubToken = PubSub.subscribe('starmao', (_, data) => {
            this.setState(data)
        })
    }

    componentWillUnmount() {
        PubSub.unsubscribe(this.pubSubToken)
    }

    render() {
        let {userList, isFirst, isLoading, err} = this.state;
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎使用本系统</h2> :
                        isLoading ? <h2>加载中。。。</h2> :
                            err ? <h2 style={{color: 'red'}}>发生了错误</h2> :

                                userList.map((value: any) => {
                                    return (
                                        <div key={value.id} className="card">
                                            <a rel="noreferrer" href={value.html_url} target="_blank">
                                                <img alt="avatar_picture" src={value.avatar_url}
                                                     style={{width: '100px'}}/>
                                            </a>
                                            <p className="card-text">{value.login}</p>
                                        </div>
                                    )

                                })
                }


            </div>
        );
    }
}

export default List;